@import '@/styles/hairline.scss';
/**
 原生css变量的定义=》类似less/sass定义变量
 语法：
 1. 定义：--css变量名:css变量值
 2. 使用：var(--css变量名)
 作用域：
 1. 局部变量 =》 .类名 {    }
 2. 全局变量 =》 :root {    }
*/
:root {
  /* 全局变量 */
  --geek-fonts-big: 60px;
}

.cssVar {
  /* 局部css变量 */
  --red-color: rgb(0, 136, 255);
  --red-border: 10px solid red;
  /* end */
  color: var(--red-color);
  font-size: 30px;
  border: var(--red-border);
}

.cssOto {
  /* 读取不到.cssVar中定义的变量 */
  border: var(--red-border);
  /* 读取:root中定义的全局变量 */
  font-size: var(--geek-fonts-big);
}

.one {
  margin: 20px;
  .top {
    // 假1px
    border-bottom: 1px solid red;
  }
  .btm {
    // border-top: 1px solid green;
    // 解决1px边框像素bug =》 真1px
    position: relative;
    @include hairline(top, green);
  }
}

.ticon {
  font-size: 60px;
}
